<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import dayjs from 'dayjs'
import { Search, Refresh, Plus, Download, Upload, UploadFilled, Delete, Check, Close, Box, Setting, Goods, FolderOpened, InfoFilled, QuestionFilled } from '@element-plus/icons-vue'
import SysDialog from '@/components/dialog/SysDialog.vue'
import MaterialDialog from '@/views/baseInfo/material/materialDialog/index.vue'
import ArchiveSelector from '@/components/common/ArchiveSelector.vue'

import { getListApi as getDictListApi } from "@/api/sysDictData"; // 导入获取字典列表的API
import { SysDictData, SysDictDataListParam } from "@/api/sysDictData/type"; // 导入获取字典列表的API
import { getProjectDocumentListApi } from "@/api/project"; // 导入获取项目列表的API
import { ProjectDocument, ProjectDocumentListParam } from "@/api/project/type";


import {
  getListApi,
  addApi,
  editApi,
  deleteApi,
  updateStatusApi,
  batchDeleteApi,
  batchUpdateStatusApi,
  batchCopyApi,
  exportApi,
  downloadTemplateApi,
  importApi
} from '@/api/materialPricing'
import type {
  MaterialPricing,
  MaterialPricingListParam,
  MaterialPricingCreateParam,
  MaterialPricingUpdateParam
} from '@/api/materialPricing/type'
import type { Material } from '@/api/material/type'

// 扩展Material类型，添加quantity属性用于批量新增
interface MaterialWithQuantity extends Material {
  quantity?: number
}
import { getSimpleProjectAll } from '@/api/project'

// 数据定义
const loading = ref(false)
const tableData = ref<MaterialPricing[]>([])
const selectedRows = ref<MaterialPricing[]>([])
const tableRef = ref()

// 批量复制相关
const batchCopyVisible = ref(false)
const targetProjectSelectorVisible = ref(false)
const selectedTargetProject = ref<ProjectDocument | null>(null)

// 项目选择器搜索字段配置
const projectSearchFields = [
  { label: '项目名称', prop: 'name', type: 'input' as const },
  { label: '项目编号', prop: 'code', type: 'input' as const },
  { label: '客户名称', prop: 'customer', type: 'input' as const },
  {
    label: '项目状态',
    prop: 'status',
    type: 'select' as const,
    options: [
      { value: 0, label: '进行中' },
      { value: 1, label: '已完成' },
      { value: 2, label: '已暂停' },
      { value: 3, label: '已取消' },
    ],
  },
]

// 项目选择器表格列配置
const projectTableColumns = [
  { prop: 'name', label: '项目名称', width: 250 },
  { prop: 'code', label: '项目编号', width: 250 },
  { prop: 'customer', label: '客户名称', width: 250 },
  { prop: 'manager', label: '项目经理', width: 200 },
]

// 获取项目列表数据的API方法
const getProjectListForBatchCopy = async (params: any) => {
  try {
    // 构建查询参数
    const queryParams: ProjectDocumentListParam = {
      name: params.name,
      code: params.code,
      customer: params.customer,
      status: params.status,
      page: params.page || 1,
      limit: params.limit || 10,
    }

    // 调用项目列表API
    return await getProjectDocumentListApi(queryParams)
  } catch (error) {
    console.error('获取项目列表失败:', error)
    return { data: { list: [], total: 0 } }
  }
}
// 类型列表
const typeList = ref<SysDictData[]>([])
// 获取类型列表
const getTypeList = async () => {
  try {
    const res = await getDictListApi({
        dictType: 'materialPricingType',
        dictLabel: "",
        status: undefined,
        page: 0,
        limit: 100
    })
    if (res && res.data) {
      typeList.value = res.data.list || []
    }
  } catch (error) {
    console.error('获取类型列表失败:', error)
  }
}


// 搜索表单
const searchForm = reactive<MaterialPricingListParam>({
  page: 1,
  limit: 10,
  projectName: '',
  materialName: '',
  materialCategoryName: '',
  type: '',
  activate: undefined
})

// 分页信息
const pagination = reactive({
  page: 1,
  limit: 10,
  total: 0
})

// 对话框状态
const dialog = reactive({
  visible: false,
  title: '',
  mode: '' as 'create' | 'edit' | 'view'
})

// 表单数据
const form = reactive<MaterialPricingCreateParam & { id?: number }>({
  materialId: 0,
  projectId: 0,
  materialPrice: 0,
  materialPurchasePrice: 0,
  number: 0,
  unit: '',
  type: '',
  activate: 1
})

// 选中的物料
const selectedMaterial = ref<Material | null>(null)
const selectedMaterials = ref<MaterialWithQuantity[]>([])

// 项目列表
const projectList = ref<ProjectDocument[]>([])

// 选中的项目
const selectedProject = ref<ProjectDocument | null>(null)





// 表单验证规则
const rules = {
  materialId: [
    { required: true, message: '请选择物料', trigger: 'change' }
  ],
  projectId: [
    { required: true, message: '请选择项目', trigger: 'change' }
  ],
  materialPrice: [
    { required: true, message: '请输入核价金额', trigger: 'blur' },
    { type: 'number', min: 0, message: '核价金额必须大于等于0', trigger: 'blur' }
  ],
  number: [
    { type: 'number', min: 0, message: '数量必须大于等于0', trigger: 'blur' }
  ]
}



// 导入对话框
const importDialog = reactive({
  visible: false,
  fileList: [] as any[]
})

// 组件引用
const formRef = ref()
const batchFormRef = ref()
const materialDialogRef = ref()

// 方法定义
const getTableData = async () => {
  loading.value = true
  try {
    const params = { ...searchForm, page: pagination.page, limit: pagination.limit }
    const res = await getListApi(params)
    if (res && res.data) {
      tableData.value = res.data.list || []
      pagination.total = res.data.total || 0
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.page = 1
  getTableData()
}

const resetSearch = () => {
  Object.assign(searchForm, {
    page: 1,
    limit: 10,
    projectName: '',
    materialName: '',
    materialCategoryName: '',
    type: '',
    activate: undefined
  })
  selectedProject.value = null
  pagination.page = 1
  getTableData()
}

const handleSizeChange = (size: number) => {
  pagination.limit = size
  getTableData()
}

const handleCurrentChange = (page: number) => {
  pagination.page = page
  getTableData()
}

// 打开对话框
const openDialog = (mode: 'create' | 'edit' | 'view', row?: MaterialPricing) => {
  // 检查编辑模式下的记录状态
  if (mode === 'edit' && row && row.activate === 0) {
    ElMessage.warning('该物料核价已失效，不允许编辑')
    return
  }
  
  dialog.mode = mode
  dialog.visible = true
  
  if (mode === 'create') {
    dialog.title = '批量新增物料核价'
    resetForm()
    selectedMaterials.value = [] // 重置批量选中的物料
  } else if (mode === 'edit') {
    dialog.title = '编辑物料核价'
    if (row) {
              Object.assign(form, {
        id: row.id,
        materialId: row.materialId,
        projectId: row.projectId,
        materialPrice: row.materialPrice,
        materialPurchasePrice: row.materialPurchasePrice,
        unit: row.unit,
        number: row.number,
        type: row.type,
        activate: row.activate
      })
      // 设置选中的物料信息
      selectedMaterial.value = {
        id: row.materialId,
        materialCode: row.materialCode,
        materialName: row.materialName,
        materialModel: row.materialModel,
        brand: row.materialBrand,
        price: row.materialPurchasePrice || 0, // 使用物料采购价格
        unitName: row.unit,
        unitPriceCoefficient: 1, // MaterialPricing中没有这个字段，设为默认值
        materialRequisitionCoefficient: 1, // MaterialPricing中没有这个字段，设为默认值
        specification: row.materialModel || '', // 使用型号作为规格的替代
        categoryName: row.materialCategoryName
      } as Material
      
      // 设置选中的项目信息
      const project = projectList.value.find(p => p.id === row.projectId)
      selectedProject.value = project || null
    }
  } else if (mode === 'view') {
    dialog.title = '查看物料核价'
    if (row) {
      Object.assign(form, {
        id: row.id,
        materialId: row.materialId,
        projectId: row.projectId,
        materialPrice: row.materialPrice,
        materialPurchasePrice: row.materialPurchasePrice,
        number: row.number,
        unit: row.unit,
        type: row.type,
        activate: row.activate
      })
      selectedMaterial.value = {
        id: row.materialId,
        materialCode: row.materialCode,
        materialName: row.materialName,
        materialModel: row.materialModel,
        brand: row.materialBrand,
        price: row.materialPurchasePrice || 0, // 使用物料采购价格
        unitName: row.unit,
        unitPriceCoefficient: 1, // MaterialPricing中没有这个字段，设为默认值
        materialRequisitionCoefficient: 1, // MaterialPricing中没有这个字段，设为默认值
        specification: row.materialModel || '', // 使用型号作为规格的替代
        categoryName: row.materialCategoryName
      } as Material
      
      // 设置选中的项目信息
      const project = projectList.value.find(p => p.id === row.projectId)
      selectedProject.value = project || null
    }
  }
}

// 关闭对话框
const closeDialog = () => {
  dialog.visible = false
  resetForm()
}

// 重置表单
const resetForm = () => {
  Object.assign(form, {
    materialId: 0,
    projectId: 0,
    materialPrice: 0,
    materialPurchasePrice: 0,
    number: 0,
    unit: '',
    type: '',
    activate: 1
  })
  selectedMaterial.value = null
  selectedProject.value = null
  formRef.value?.clearValidate()
}

// 打开物料选择器
const openMaterialSelector = () => {
  // 在批量新增模式下，传递已选择的物料数据给物料选择器进行回显
  if (dialog.mode === 'create') {
    materialDialogRef.value?.onShow(selectedMaterials.value)
  } else {
    // 编辑模式下不需要传递预选数据
    materialDialogRef.value?.onShow()
  }
}

// 处理物料选择（单选模式，编辑时使用）
const handleMaterialSelect = (material: Material) => {
  selectedMaterial.value = material
  form.materialId = material.id!
  // 自动设置单位字段
  form.unit = material.unitName || ''
  // 可以自动填入计算后的核价金额作为初始值
  if (!form.materialPrice || form.materialPrice === 0) {
    const calculatedPrice = (material.price || 0) * (material.unitPriceCoefficient || 1) * (material.materialRequisitionCoefficient || 1)
    form.materialPrice = calculatedPrice
  }
}

// 处理批量物料选择（多选模式，新增时使用）
const handleMaterialSelectionChange = (materials: Material[]) => {
  // 为新选择的物料添加数量字段
  selectedMaterials.value = materials.map(material => ({
    ...material,
    quantity: (material as MaterialWithQuantity).quantity || 1 // 默认数量为1
  } as MaterialWithQuantity))
}

// 处理物料选择确认
const handleMaterialConfirm = () => {
  if (dialog.mode === 'create') {
    // 批量新增模式：确认后关闭物料选择器
    if (selectedMaterials.value.length === 0) {
      ElMessage.warning('请至少选择一个物料')
      return
    }
    ElMessage.success(`已选择 ${selectedMaterials.value.length} 个物料`)
    // 关闭物料选择弹出框
    materialDialogRef.value?.onClose()
  } else {
    // 编辑模式：单选模式下不会触发这个事件
    ElMessage.success('物料选择完成')
    materialDialogRef.value?.onClose()
  }
}

// 计算总金额
const calculateTotalAmount = () => {
  const total = selectedMaterials.value.reduce((sum, material) => {
    const calculatedPrice = (material.price || 0) * (material.unitPriceCoefficient || 1) * (material.materialRequisitionCoefficient || 1)
    return sum + (calculatedPrice * (material.quantity || 1))
  }, 0)
  return total.toFixed(2)
}

// 批量新增处理
const handleBatchAdd = async () => {
  const batchData = selectedMaterials.value.map(material => {
    const calculatedPrice = (material.price || 0) * (material.unitPriceCoefficient || 1) * (material.materialRequisitionCoefficient || 1)
    return {
      materialId: material.id!,
      materialCode: material.materialCode,
      materialName: material.materialName,
      materialPrice: calculatedPrice,
      materialPurchasePrice: material.price || 0, // 添加采购价格
      number: material.quantity || 1, // 使用用户输入的数量
      unit: material.unitName || '',
      projectId: form.projectId || 0,
      projectName: projectList.value.find(p => p.id === form.projectId)?.name || '',
      type: form.type,
      activate: 1
    }
  })

  // 批量调用新增接口
  const promises = batchData.map(data => addApi(data as MaterialPricingCreateParam))
  await Promise.all(promises)
  
  ElMessage.success(`批量新增成功，共添加 ${batchData.length} 条记录`)
}



// 处理项目选择(表单内)
const handleProjectChange = (projectId: number) => {
  const project = projectList.value.find(item => item.id === projectId)
  selectedProject.value = project || null
  // 确保form.projectId与选择的项目保持同步
  form.projectId = projectId || 0
}

// 清除选中的物料
const clearSelectedMaterial = () => {
  selectedMaterial.value = null
  selectedMaterials.value = []
  form.materialId = 0
}

// 移除单个物料
const removeMaterial = (index: number) => {
  selectedMaterials.value.splice(index, 1)
}

// 更新物料数量
const updateMaterialQuantity = (index: number, quantity: number) => {
  if (selectedMaterials.value[index]) {
    selectedMaterials.value[index].quantity = quantity || 1
  }
}

// 设置所有物料的数量
const setAllQuantity = (quantity: number) => {
  selectedMaterials.value.forEach(material => {
    material.quantity = quantity
  })
  ElMessage.success(`已将所有物料数量设置为 ${quantity}`)
}

// 表格行样式
const getTableRowClassName = ({ rowIndex }: { rowIndex: number }) => {
  return rowIndex % 2 === 0 ? 'even-row' : 'odd-row'
}

// 确认操作
const handleConfirm = async () => {
  if (dialog.mode === 'view') {
    closeDialog()
    return
  }

  try {
    if (dialog.mode === 'create') {
      // 批量新增模式：先验证必填项
      if (selectedMaterials.value.length === 0) {
        ElMessage.warning('请至少选择一个物料')
        return
      }
      
      if (!form.projectId) {
        ElMessage.warning('请选择项目')
        return
      }
      

      
      await handleBatchAdd()
    } else if (dialog.mode === 'edit') {
      // 编辑模式验证表单
      await formRef.value?.validate()
      await editApi(form as MaterialPricingUpdateParam)
      ElMessage.success('编辑成功')
    }
    
    closeDialog()
    getTableData()
  } catch (error) {
    console.error('操作失败:', error)
    ElMessage.error('操作失败，请稍后重试')
  }
}

// 删除操作
const handleDelete = async (row: MaterialPricing) => {
  // 检查记录的状态
  if (row.activate === 0) {
    ElMessage.warning('该物料核价已失效，不允许删除')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要删除物料"${row.materialName}"的核价记录吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    await deleteApi(row.id!)
    ElMessage.success('删除成功')
    getTableData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
    }
  }
}

// 状态切换
const handleStatusChange = async (row: MaterialPricing) => {
  try {
    await updateStatusApi({ id: row.id!, activate: row.activate! })
    ElMessage.success('状态更新成功')
  } catch (error) {
    console.error('状态更新失败:', error)
    row.activate = row.activate === 1 ? 0 : 1 // 恢复原状态
  }
}

// 处理表格选择变化
const handleSelectionChange = (selection: MaterialPricing[]) => {
  selectedRows.value = selection
}

// 批量复制相关方法
const openBatchCopyDialog = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要复制的物料核价记录')
    return
  }
  
  // 允许复制失效数据，复制后自动生效
  
  batchCopyVisible.value = true
}

// 关闭批量复制弹窗
const closeBatchCopyDialog = () => {
  batchCopyVisible.value = false
  selectedTargetProject.value = null
}

// 打开目标项目选择器
const openTargetProjectSelector = () => {
  targetProjectSelectorVisible.value = true
}

// 处理目标项目选择
const handleTargetProjectSelect = (project: ProjectDocument) => {
  selectedTargetProject.value = project
  console.log('选择的目标项目:', project)
}

// 确认批量复制
const confirmBatchCopy = async () => {
  if (!selectedTargetProject.value) {
    ElMessage.warning('请选择目标项目')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要将选中的${selectedRows.value.length}条物料核价记录复制到项目"${selectedTargetProject.value.name}"吗？`,
      '批量复制确认',
      {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }
    )
    
    const sourceIds = selectedRows.value.map(row => row.id).filter(id => id) as number[]
    await batchCopyApi({
      sourceIds,
      targetProjectId: selectedTargetProject.value.id!
    })
    
    ElMessage.success(`成功复制${sourceIds.length}条物料核价记录`)
    closeBatchCopyDialog()
    
    // 刷新表格数据
    await getTableData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量复制失败:', error)
      ElMessage.error('批量复制失败')
    }
  }
}

// 批量删除
const handleBatchDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }

  // 检查选中的记录中是否有已失效的
  const invalidRecords = selectedRows.value.filter(item => item.activate === 0)
  if (invalidRecords.length > 0) {
    ElMessage.warning(`选中的记录中有${invalidRecords.length}条已失效，不允许删除操作`)
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedRows.value.length} 条数据吗？`,
      '批量删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const ids = selectedRows.value.map(row => row.id!).filter(id => id)
    const response = await batchDeleteApi(ids)
    
    if (response.code === 200) {
      ElMessage.success('批量删除成功')
      getTableData()
      // 清空选择
      tableRef.value?.clearSelection()
    } else {
      ElMessage.error(response.message || '批量删除失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 批量失效
const handleBatchDeactivate = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择需要失效的记录')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要将选中的${selectedRows.value.length}条记录设为失效吗？`,
      '批量失效确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const ids = selectedRows.value.map(row => row.id!).filter(id => id)
    const response = await batchUpdateStatusApi({ ids, activate: 0 })
    
    if (response.code === 200) {
      ElMessage.success('批量失效成功')
      getTableData()
      // 清空选择
      tableRef.value?.clearSelection()
    } else {
      ElMessage.error(response.message || '批量失效失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量失效失败:', error)
      ElMessage.error('批量失效失败')
    }
  }
}

// 批量生效
const handleBatchActivate = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择需要生效的记录')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      `确定要将选中的${selectedRows.value.length}条记录设为生效吗？`,
      '批量生效确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const ids = selectedRows.value.map(row => row.id!).filter(id => id)
    const response = await batchUpdateStatusApi({ ids, activate: 1 })
    
    if (response.code === 200) {
      ElMessage.success('批量生效成功')
      getTableData()
      // 清空选择
      tableRef.value?.clearSelection()
    } else {
      ElMessage.error(response.message || '批量生效失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量生效失败:', error)
      ElMessage.error('批量生效失败')
    }
  }
}

// 导出操作
const handleExport = async () => {
  try {
    loading.value = true
    
    // 创建导出参数，包含必要的分页参数供后端使用
    const exportParams: MaterialPricingListParam = {
      ...searchForm,
      page: 1,
      limit: 999999  // 设置一个大数字，后端会重新设置为MAX_VALUE
    }

    const response = await exportApi(exportParams)
    
    // 检查响应数据
    let blobData: Blob
    if (response && typeof response === 'object' && 'data' in response) {
      // HTTP拦截器返回完整的response对象，提取data字段
      blobData = (response as any).data
    } else if ((response as any) instanceof Blob) {
      // 直接是Blob数据
      blobData = response as Blob
    } else {
      console.error('导出响应格式错误:', response)
      ElMessage.error('导出数据格式错误')
      return
    }
    
    // 确保blobData是Blob类型
    if (!(blobData instanceof Blob)) {
      console.error('提取的数据不是Blob类型:', blobData)
      ElMessage.error('导出数据格式错误')
      return
    }
    
    // 检查blob大小
    if (blobData.size === 0) {
      ElMessage.error('导出文件为空')
      return
    }
    
    // 处理文件下载
    const url = window.URL.createObjectURL(blobData)
    const a = document.createElement('a')
    a.href = url
    a.download = '物料核价数据.xlsx'
    a.click()
    window.URL.revokeObjectURL(url)
    
    ElMessage.success('导出成功')
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error('导出失败')
  } finally {
    loading.value = false
  }
}



// 下载模板
const downloadTemplate = async () => {
  try {
    const res = await downloadTemplateApi()
    
    // 检查响应数据
    let blob: Blob
    if (res && typeof res === 'object' && 'data' in res) {
      // HTTP拦截器返回完整的response对象，提取data字段
      blob = (res as any).data
    } else if ((res as any) instanceof Blob) {
      // 直接是Blob数据
      blob = res as Blob
    } else {
      console.error('模板下载响应格式错误:', res)
      ElMessage.error('模板下载数据格式错误')
      return
    }
    
    // 确保blob是Blob类型
    if (!(blob instanceof Blob)) {
      console.error('提取的数据不是Blob类型:', blob)
      ElMessage.error('模板下载数据格式错误')
      return
    }
    
    // 检查blob大小
    if (blob.size === 0) {
      ElMessage.error('模板文件为空')
      return
    }
    
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = '物料核价导入模板.xlsx'
    a.click()
    window.URL.revokeObjectURL(url)
    ElMessage.success('模板下载成功')
  } catch (error) {
    console.error('模板下载失败:', error)
    ElMessage.error('模板下载失败')
  }
}

// 打开导入对话框
const openImportDialog = () => {
  importDialog.visible = true
  importDialog.fileList = []
}

// 关闭导入对话框
const closeImportDialog = () => {
  importDialog.visible = false
  importDialog.fileList = []
}

// 导入操作
const handleImport = async () => {
  if (importDialog.fileList.length === 0) {
    ElMessage.warning('请选择要导入的文件')
    return
  }

  try {
    const formData = new FormData()
    formData.append('file', importDialog.fileList[0].raw)
    
    const response = await importApi(formData)
    
    // 处理成功响应
    if (response.code === 200) {
      ElMessage.success(response.data || '导入成功')
      closeImportDialog()
      getTableData()
    } else {
      // 处理业务错误（部分成功或验证失败）
      ElMessage.error(response.msg || '导入失败')
    }
    
  } catch (error: any) {
    console.error('导入失败:', error)
    
    // 处理不同类型的错误
    let errorMessage = '导入失败'
    if (error.response && error.response.data && error.response.data.msg) {
      errorMessage = error.response.data.msg
    } else if (error.message) {
      errorMessage = error.message
    }
    
    // 显示详细错误信息
    if (errorMessage.includes('\n')) {
      // 多行错误信息，使用通知显示
      ElNotification({
        title: '导入结果',
        message: errorMessage,
        type: 'error',
        duration: 10000,
        dangerouslyUseHTMLString: false
      })
    } else {
      // 单行错误信息，使用消息显示
      ElMessage.error(errorMessage)
    }
  }
}

// 格式化价格
const formatPrice = (price: number | undefined, unitPriceCoefficient: number | undefined, materialRequisitionCoefficient: number | undefined) => {
  if (price === undefined || price === null) return '¥0.00'
  // 当系数为undefined或null时，使用默认值1
  const coefficient1 = unitPriceCoefficient || 1
  const coefficient2 = materialRequisitionCoefficient || 1
  const calculatedPrice = price * coefficient1 * coefficient2
  return `¥${Number(calculatedPrice).toFixed(2)}`
}

// 获取所有项目列表数据
const getAllProjects = async () => {
  try {
    const res = await getSimpleProjectAll()
    if (res.code === 200) {
      projectList.value = res.data || []
      console.log('获取项目列表成功，共', projectList.value.length, '条数据')
    } else {
      console.error('获取项目列表失败:', res.msg)
    }
  } catch (error) {
    console.error('获取项目列表失败:', error)
  }
}

// 初始化
onMounted(() => {
  getTableData()
  getAllProjects() // 获取所有项目列表数据
  getTypeList() // 获取类型列表
})
</script>

<template>
  <div class="material-pricing-container">
    <!-- 顶部操作栏 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true" label-width="auto">
        <el-form-item label="项目信息" >
          <el-select
          style="width: 200px"

            v-model="searchForm.projectName"
            placeholder="请选择项目"
            clearable
            filterable
            class="selector-input"
            @change="(value: string) => { selectedProject = projectList.find(p => p.name === value) || null }"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="`${item.name} (${item.code})`"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input
            v-model="searchForm.materialName"
            placeholder="请输入物料名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="物料分类">
          <el-input
            v-model="searchForm.materialCategoryName"
            placeholder="请输入物料分类"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="状态">
          <el-select
            v-model="searchForm.activate"
            placeholder="请选择状态"
            clearable
            style="width: 120px"
          >
            <el-option label="生效" :value="1" />
            <el-option label="失效" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" v-permission="['materialPricing:view']">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="resetSearch" v-permission="['materialPricing:view']">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
      
      <div class="action-buttons">
        <el-button type="primary" @click="openDialog('create')" v-permission="['materialPricing:edit']">
          <el-icon><Plus /></el-icon>
          新增
        </el-button>
        <el-button 
          type="success"
          @click="openBatchCopyDialog" 
          :disabled="selectedRows.length === 0"
          v-permission="['materialPricing:edit']"
        >
          <el-icon><FolderOpened /></el-icon>
          批量复制 {{ selectedRows.length > 0 ? `(${selectedRows.length})` : '' }}
        </el-button>
        <el-button 
          type="danger" 
          @click="handleBatchDelete" 
          :disabled="selectedRows.length === 0"
          v-permission="['materialPricing:edit']"
        >
          <el-icon><Delete /></el-icon>
          批量删除 {{ selectedRows.length > 0 ? `(${selectedRows.length})` : '' }}
        </el-button>
        <el-button 
          type="warning" 
          @click="handleBatchDeactivate" 
          :disabled="selectedRows.length === 0"
          v-permission="['materialPricing:edit']"
        >
          <el-icon><Close /></el-icon>
          批量失效 {{ selectedRows.length > 0 ? `(${selectedRows.length})` : '' }}
        </el-button>
        <el-button 
          type="success" 
          @click="handleBatchActivate" 
          :disabled="selectedRows.length === 0"
          v-permission="['materialPricing:edit']"
        >
          <el-icon><Check /></el-icon>
          批量生效 {{ selectedRows.length > 0 ? `(${selectedRows.length})` : '' }}
        </el-button>
        <el-button type="success" @click="handleExport" v-permission="['materialPricing:view']">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
        <el-button type="info" @click="downloadTemplate" v-permission="['materialPricing:view']">
          <el-icon><Download /></el-icon>
          下载模板
        </el-button>
        <el-button type="primary" @click="openImportDialog" v-permission="['materialPricing:edit']">
          <el-icon><Upload /></el-icon>
          导入
        </el-button>
      </div>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card" shadow="never">
      <el-table
        ref="tableRef"
        v-loading="loading"
        :data="tableData"
        border
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="activate" label="状态" min-width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.activate ? 'success' : 'danger'">
            {{ scope.row.activate ? '生效' : '失效' }}
          </el-tag>
        </template>
      </el-table-column>
        <el-table-column label="项目" width="100" show-overflow-tooltip>
          <template #default="scope">
            <div>
              <div>{{ scope.row.projectName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="materialCode" label="物料编码" width="120" show-overflow-tooltip />
        <el-table-column prop="materialName" label="物料名称" width="150" show-overflow-tooltip />
        <el-table-column prop="materialModel" label="物料型号" width="120" show-overflow-tooltip />
        <el-table-column prop="unit" label="物料单位" width="100" show-overflow-tooltip />
        <el-table-column prop="materialCategoryName" label="物料分类" width="120" show-overflow-tooltip />

        <el-table-column prop="materialPurchasePrice" label="采购价格" width="120" align="right">
          <template #default="scope">
            <span>¥{{ scope.row.materialPurchasePrice?.toFixed(2) || '0.00' }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="materialPrice" label="核价金额" width="120" align="right">
          <template #default="scope">
            <span>¥{{ scope.row.materialPrice?.toFixed(2) || '0.00' }}</span>
          </template>
        </el-table-column>
                <el-table-column prop="number" label="数量" width="100" align="right">
          <template #default="scope">
            <span>{{ scope.row.number || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位" width="80" align="center">
          <template #default="scope">
            <span>{{ scope.row.unit || '-' }}</span>
          </template>
        </el-table-column>



        <el-table-column prop="createTime" label="创建时间" width="160" show-overflow-tooltip />
        <el-table-column prop="createName" label="创建人" min-width="120" align="center" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.createName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" min-width="180" align="center" show-overflow-tooltip>
          <template #default="scope">
            <span class="date-value">{{ scope.row.updateTime ? dayjs(scope.row.updateTime).format('YYYY-MM-DD HH:mm:ss') : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateName" label="更新人" min-width="120" align="center" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.updateName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="activate" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.activate === 1 ? 'success' : 'danger'">
              {{ scope.row.activate === 1 ? '生效' : '失效' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <el-button type="primary" size="small" @click="openDialog('edit', scope.row)" :disabled="scope.row.activate === 0" v-permission="['materialPricing:edit']">
                编辑
              </el-button>
              <el-button type="info" size="small" @click="openDialog('view', scope.row)" v-permission="['materialPricing:view']">
                查看
              </el-button>
              <el-button type="danger" size="small" @click="handleDelete(scope.row)" :disabled="scope.row.activate === 0" v-permission="['materialPricing:edit']">
                删除
              </el-button>
              <!-- <el-switch 
                v-model="scope.row.activate"
                class="ml-2"
                inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949; margin-left: 15px"
                active-text="生效"
                inactive-text="失效"
                :active-value="1"
                :inactive-value="0"
                @change="handleStatusChange(scope.row)"
              /> -->
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.limit"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 新增/编辑/查看对话框 -->
    <SysDialog
      :visible="dialog.visible"
      :title="dialog.title"
      :width="dialog.mode === 'create' ? 1000  : 1000 "
      :height="dialog.mode === 'create' ? 700 : 700"
      @on-close="closeDialog"
      @on-confirm="handleConfirm"
      class="material-pricing-dialog"
    >
      <template #content>
        <!-- 统一的表单界面，适用于新增、编辑、查看模式 -->
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="100px"
          class="dialog-form"
        >
          <!-- 新增模式批量操作提示 -->
          <div v-if="dialog.mode === 'create'" class="dialog-batch-notice">
            <div class="notice-content">
              <div class="notice-icon">
                <el-icon><InfoFilled /></el-icon>
              </div>
              <div class="notice-text">
                <h4>批量新增模式</h4>
                <p>选择多个物料进行批量创建，使用统一的项目和状态配置</p>
              </div>
            </div>
          </div>
          <el-form-item label="物料选择" prop="materialId">
            <div style="width: 100%">
              <!-- 新增模式：显示批量选择的物料列表 -->
              <div v-if="dialog.mode === 'create'">
                <div class="dialog-batch-header">
                  <div class="header-actions">
                    <el-button type="primary" :icon="Plus" @click="openMaterialSelector" size="small">
                      选择物料
                    </el-button>
                    <el-button 
                      v-if="selectedMaterials.length > 0" 
                      type="danger" 
                      :icon="Delete" 
                      @click="clearSelectedMaterial" 
                      plain
                      size="small"
                    >
                      清空全部
                    </el-button>
                  </div>
                  <div v-if="selectedMaterials.length > 0" class="header-stats">
                    <el-tag type="primary" size="small">{{ selectedMaterials.length }} 个物料</el-tag>
                    <el-tag type="warning" size="small">{{ calculateTotalAmount() }}</el-tag>
                  </div>
                </div>
                
                <!-- 批量物料表格 -->
                <div v-if="selectedMaterials.length > 0" class="batch-materials-table" style="margin-top: 15px;">
                  <el-table
                    :data="selectedMaterials"
                    border
                    style="width: 100%"
                    max-height="450"
                  >
                    <el-table-column type="index" label="序号" width="50" align="center" />
                    <el-table-column prop="materialCode" label="编码" width="100" />
                    <el-table-column prop="materialName" label="物料名称" min-width="140" />
                    <el-table-column prop="materialModel" label="型号" width="100" />
                    <el-table-column prop="unitName" label="单位" width="60" align="center" />
                    <el-table-column label="数量" width="100" align="center">
                      <template #default="scope">
                        <el-input-number
                          v-model="scope.row.quantity"
                          :min="0.01"
                          :max="999999.99"
                          :precision="2"
                          size="small"
                          style="width: 85px"
                          controls-position="right"
                        />
                      </template>
                    </el-table-column>
                    <el-table-column label="采购价" width="90" align="right">
                      <template #default="scope">
                        ¥{{ scope.row.price?.toFixed(2) || '0.00' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="核价金额" width="100" align="right">
                      <template #default="scope">
                        ¥{{ formatPrice(scope.row.price, scope.row.unitPriceCoefficient, scope.row.materialRequisitionCoefficient) }}
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="70" align="center">
                      <template #default="scope">
                        <el-button
                          type="danger"
                          size="small"
                          :icon="Delete"
                          @click="removeMaterial(scope.$index)"
                          link
                        >
                          移除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                
                <!-- 空状态 -->
                <div v-else class="dialog-empty-state">
                  <div class="empty-icon">
                    <el-icon><Box /></el-icon>
                  </div>
                  <p class="empty-text">请点击上方按钮选择物料</p>
                </div>
              </div>
              
              <!-- 编辑/查看模式：显示单个物料信息 -->
              <div v-else>
                <!-- 显示已选择的物料信息 -->
                <div v-if="selectedMaterial" class="selected-material-info">
                  <el-descriptions :column="2" size="small" border>
                    <el-descriptions-item label="物料编码">{{ selectedMaterial.materialCode }}</el-descriptions-item>
                    <el-descriptions-item label="物料名称">{{ selectedMaterial.materialName }}</el-descriptions-item>
                    <el-descriptions-item label="物料型号">{{ selectedMaterial.materialModel || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="物料规格">{{ selectedMaterial.specification || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="物料单位">{{ selectedMaterial.unitName || '-' }}</el-descriptions-item>
                    <el-descriptions-item label="采购价格">¥{{ selectedMaterial.price?.toFixed(2) || '0.00' }}</el-descriptions-item>
                    <el-descriptions-item label="单价索取系数">{{ selectedMaterial.unitPriceCoefficient || '1' }}</el-descriptions-item>
                    <el-descriptions-item label="材料索取系数">{{ selectedMaterial.materialRequisitionCoefficient || '1' }}</el-descriptions-item>
                    <el-descriptions-item label="计算核价金额">{{ formatPrice(selectedMaterial.price,selectedMaterial.unitPriceCoefficient,selectedMaterial.materialRequisitionCoefficient) }}</el-descriptions-item>
                  </el-descriptions>
                  <div class="material-actions">
                    <el-button v-if="dialog.mode !== 'view'" type="primary" size="small" @click="openMaterialSelector">
                      重新选择
                    </el-button>
                    <el-button v-if="dialog.mode !== 'view'" type="warning" size="small" @click="clearSelectedMaterial">
                      清除选择
                    </el-button>
                  </div>
                </div>
                <!-- 未选择物料时的选择按钮 -->
                <div v-else class="no-material-selected">
                  <el-button v-if="dialog.mode !== 'view'" type="primary" @click="openMaterialSelector">
                    <el-icon><Plus /></el-icon>
                    选择物料
                  </el-button>
                  <span v-else class="no-data">未选择物料</span>
                </div>
              </div>
            </div>
          </el-form-item>
          
          <!-- 编辑/查看模式才显示的字段 -->
          <template v-if="dialog.mode !== 'create'">
            <el-form-item label="采购价格" prop="materialPurchasePrice">
              <el-input-number
                v-model="form.materialPurchasePrice"
                :precision="2"
                :min="0"
                :max="999999.99"
                :disabled="dialog.mode === 'view'"
                style="width: 100%"
                placeholder="请输入采购价格"
              />
            </el-form-item>
            
            <el-form-item label="核价金额" prop="materialPrice">
              <el-input-number
                v-model="form.materialPrice"
                :precision="2"
                :min="0"
                :max="999999.99"
                :disabled="true"
                style="width: 100%"
                placeholder="请输入核价金额"
              />
              <div class="price-tip">
                <el-text type="info" size="small">
                  核价金额 = 采购价格 × 单价索取系数 × 材料索取系数
                </el-text>
              </div>
            </el-form-item>
            
            <el-form-item label="数量" prop="number">
              <el-input-number
                v-model="form.number"
                :precision="2"
                :min="0"
                :max="999999.99"
                :disabled="dialog.mode === 'view'"
                style="width: 100%"
                placeholder="请输入数量"
              />
            </el-form-item>
            
            <el-form-item label="单位">
              <el-input
                v-model="form.unit"
                :disabled="true"
                placeholder="从物料档案自动获取"
                style="width: 100%"
              />
            </el-form-item>
          </template>

          <el-form-item label="项目名称" prop="projectId">
            <el-select
              v-model="form.projectId"
              :disabled="dialog.mode === 'view'"
              placeholder="请选择项目"
              clearable
              filterable
              class="w-full"
              @change="handleProjectChange"
            >
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="`${item.name} (${item.code})`"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          
        </el-form>
      </template>
    </SysDialog>

    <!-- 物料选择对话框 -->
    <MaterialDialog
      ref="materialDialogRef"
      :multiple="dialog.mode === 'create'"
      @handleMaterialSelect="handleMaterialSelect"
      @handleMaterialSelectionChange="handleMaterialSelectionChange"
      @confirmMaterialSelect="handleMaterialConfirm"
    />



    <!-- 导入对话框 -->
    <SysDialog
      :visible="importDialog.visible"
      title="导入物料核价数据"
      :width="600"
      :height="400"
      @on-close="closeImportDialog"
      @on-confirm="handleImport"
    >
      <template #content>
        <div style="margin-bottom: 20px;">
          <el-alert 
            title="导入规则说明" 
            type="info" 
            :closable="false"
            show-icon
          >
            <template #default>
              <div style="font-size: 13px; line-height: 1.6;">
                <p><strong>导入规则：</strong></p>
                <p>1. <strong>有物料编码</strong>：系统会根据物料编码自动查询物料档案，填充物料名称、型号、分类、单位等信息</p>
                <p>2. <strong>无物料编码</strong>：系统会使用Excel中填写的物料信息直接保存（物料名称必填）</p>
                <p>3. <strong>必填字段</strong>：项目名称</p>
                <p>4. <strong>注意事项</strong>：项目名称和物料编码（如果填写）必须在系统中已存在</p>
              </div>
            </template>
          </el-alert>
        </div>
        
        <el-upload
          ref="uploadRef"
          v-model:file-list="importDialog.fileList"
          :auto-upload="false"
          :limit="1"
          accept=".xlsx,.xls"
          drag
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              只能上传xlsx/xls文件，且不超过10MB。建议先下载模板文件进行填写。
            </div>
          </template>
        </el-upload>
      </template>
    </SysDialog>

    <!-- 批量复制弹窗 -->
    <el-dialog
      v-model="batchCopyVisible"
      title="批量复制物料核价"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="batch-copy-content">
        <el-alert
          title="提示"
          type="info"
          description="将选中的物料核价复制到指定的目标项目中。"
          :closable="false"
          style="margin-bottom: 20px"
        />
        
        <div class="copy-info">
          <p><strong>选中记录数：</strong>{{ selectedRows.length }} 条</p>
          <p><strong>源项目：</strong>{{ selectedRows.map(row => row.projectName).filter((name, index, arr) => arr.indexOf(name) === index).join(', ') }}</p>
        </div>
        
        <el-form label-width="120px" style="margin-top: 20px">
          <el-form-item label="目标项目" required>
            <el-input
              :model-value="selectedTargetProject?.name || ''"
              placeholder="请选择目标项目"
              readonly
            >
              <template #append>
                <el-button @click="openTargetProjectSelector">选择项目</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeBatchCopyDialog">取消</el-button>
          <el-button 
            type="primary" 
            @click="confirmBatchCopy"
            :disabled="!selectedTargetProject"
          >
            确认复制
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 项目选择器 -->
    <ArchiveSelector
      v-model="targetProjectSelectorVisible"
      title="选择目标项目"
      :fetch-data-api="getProjectListForBatchCopy"
      :search-fields="projectSearchFields"
      :table-columns="projectTableColumns"
      @confirm="handleTargetProjectSelect"
    />

  </div>
</template>

<style scoped lang="scss">
.material-pricing-container {
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  min-height: 100vh;
  position: relative;
  
  // 添加动态背景装饰
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.03) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  
  // 确保内容在背景之上
  > * {
    position: relative;
    z-index: 1;
  }

  .search-card {
    margin-bottom: 24px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    box-shadow: 
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06),
      0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    border: 1px solid rgba(226, 232, 240, 0.8);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }

    :deep(.el-card__body) {
      padding: 24px;
      background: transparent;
    }

    .action-buttons {
      margin-top: 20px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      
      .el-button {
        border-radius: 12px;
        font-weight: 500;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        &.el-button--primary {
          background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
          border: none;
          
          &:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
          }
        }
        
        &.el-button--success {
          background: linear-gradient(135deg, #10b981 0%, #059669 100%);
          border: none;
          
          &:hover {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
          }
        }
        
        &.el-button--warning {
          background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
          border: none;
          
          &:hover {
            background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
          }
        }
      }
    }
  }

  .table-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    box-shadow: 
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06),
      0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    border: 1px solid rgba(226, 232, 240, 0.8);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 
        0 8px 12px -2px rgba(0, 0, 0, 0.1),
        0 4px 6px -1px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }

    :deep(.el-card__body) {
      padding: 24px;
      background: transparent;
    }

    // 美化表格
    :deep(.el-table) {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      
      .el-table__header {
        background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        
        th {
          background: transparent !important;
          border-bottom: 2px solid #cbd5e1 !important;
          border-right: 1px solid #e2e8f0 !important;
          color: #475569;
          font-weight: 600;
          font-size: 13px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          padding: 16px 12px;
          
          &:first-child {
            border-left: none;
          }
          
          &:last-child {
            border-right: none;
          }
        }
      }
      
      .el-table__body {
        tr {
          transition: all 0.2s ease;
          
          &:hover {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
            transform: scale(1.001);
          }
          
          td {
            border-bottom: 1px solid #f1f5f9 !important;
            border-right: 1px solid #f8fafc !important;
            padding: 14px 12px;
            
            &:first-child {
              border-left: none;
            }
            
            &:last-child {
              border-right: none;
            }
          }
        }
      }
      
      // 操作按钮美化
      .el-button {
        border-radius: 8px;
        font-size: 12px;
        padding: 4px 12px;
        transition: all 0.2s ease;
        
        &.el-button--text {
          &.el-button--primary {
            color: #3b82f6;
            &:hover {
              background: rgba(59, 130, 246, 0.1);
              color: #1d4ed8;
            }
          }
          
          &.el-button--success {
            color: #10b981;
            &:hover {
              background: rgba(16, 185, 129, 0.1);
              color: #059669;
            }
          }
          
          &.el-button--danger {
            color: #ef4444;
            &:hover {
              background: rgba(239, 68, 68, 0.1);
              color: #dc2626;
            }
          }
        }
      }
    }

    .pagination {
      margin-top: 24px;
      display: flex;
      justify-content: right;
      
      :deep(.el-pagination) {
        .el-pager li {
          border-radius: 8px;
          margin: 0 2px;
          transition: all 0.2s ease;
          
          &:hover {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            transform: translateY(-1px);
          }
          
          &.is-active {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
          }
        }
        
        .btn-prev, .btn-next {
          border-radius: 8px;
          transition: all 0.2s ease;
          
          &:hover {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            transform: translateY(-1px);
          }
        }
      }
    }

    .price-highlight {
      color: #f59e0b;
      font-weight: 600;
      font-family: 'Courier New', monospace;
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      padding: 2px 8px;
      border-radius: 6px;
      display: inline-block;
      box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
    }
    
    // 状态标签美化
    .el-tag {
      border-radius: 8px;
      font-weight: 500;
      font-size: 12px;
      padding: 0 8px;
      height: 24px;
      line-height: 22px;
      border: none;
      
      &.el-tag--success {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        color: #059669;
        box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
      }
      
      &.el-tag--danger {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #dc2626;
        box-shadow: 0 1px 3px rgba(239, 68, 68, 0.2);
      }
      
      &.el-tag--warning {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #d97706;
        box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
      }
    }
  }

  .selected-material-info {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
    }
    
    :deep(.el-descriptions) {
      .el-descriptions__header {
        margin-bottom: 16px;
      }
      
      .el-descriptions__body {
        .el-descriptions__table {
          border-radius: 8px;
          overflow: hidden;
          
          .el-descriptions__cell {
            border: 1px solid #e0f2fe;
            background: rgba(255, 255, 255, 0.8);
            padding: 12px;
            
            &.el-descriptions__label {
              background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
              font-weight: 600;
              color: #0369a1;
            }
          }
        }
      }
    }

    .material-actions {
      margin-top: 16px;
      display: flex;
      gap: 10px;
      
      .el-button {
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s ease;
        
        &:hover {
          transform: translateY(-1px);
        }
      }
    }
  }

  .no-material-selected {
    text-align: center;
    padding: 32px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #94a3b8;
      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    }

    .no-data {
      color: #64748b;
      font-size: 14px;
      font-style: italic;
    }
    
    .el-button {
      margin-top: 8px;
      border-radius: 10px;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
      }
    }
  }

  .custom-export-content {
    .field-selection {
      h4 {
        margin-bottom: 16px;
        color: #303133;
      }

      .el-checkbox-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
    }
  }

  .price-tip {
    margin-top: 4px;
  }

  .action-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  // 现代化批量新增样式
  .modern-batch-container {
    .batch-layout {
      display: flex;
      gap: 24px;
      height: 100%;
      
      .left-section {
        flex: 2;
        min-width: 0;
      }
      
      .right-section {
        flex: 1;
        min-width: 320px;
      }
      
      .section-card {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        height: 100%;
        display: flex;
        flex-direction: column;
        
        &:hover {
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
          transform: translateY(-2px);
        }
      }
      
      // 物料卡片样式
      .materials-card {
        .card-header {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          padding: 20px 24px;
          
          .header-main {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
            
            .header-title {
              display: flex;
              align-items: center;
              gap: 16px;
              
              .title-icon-wrapper {
                width: 48px;
                height: 48px;
                background: rgba(255, 255, 255, 0.15);
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                backdrop-filter: blur(10px);
                
                .title-icon {
                  font-size: 24px;
                  color: white;
                }
              }
              
              .title-content {
                .title-text {
                  margin: 0;
                  font-size: 20px;
                  font-weight: 600;
                  color: white;
                  line-height: 1.2;
                }
                
                .title-desc {
                  margin: 4px 0 0 0;
                  font-size: 14px;
                  color: rgba(255, 255, 255, 0.8);
                  line-height: 1.4;
                }
              }
            }
            
            .header-stats {
              .stats-badges {
                display: flex;
                gap: 12px;
                align-items: center;
                
                .stats-badge {
                  :deep(.el-badge__content) {
                    background: #f59e0b !important;
                    border-color: #f59e0b !important;
                    font-weight: 600;
                  }
                }
                
                .amount-tag {
                  background: rgba(255, 255, 255, 0.15);
                  border: 1px solid rgba(255, 255, 255, 0.2);
                  color: white;
                  font-weight: 600;
                  backdrop-filter: blur(10px);
                  
                  .el-icon {
                    margin-right: 4px;
                  }
                }
              }
            }
          }
          
          .header-actions {
            display: flex;
            gap: 12px;
            
            .primary-action-btn {
              background: white;
              color: #667eea;
              border: none;
              font-weight: 600;
              padding: 12px 20px;
              border-radius: 10px;
              transition: all 0.2s ease;
              
              &:hover {
                background: #f8fafc;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              }
            }
            
            .secondary-action-btn {
              background: rgba(239, 68, 68, 0.1);
              color: #ef4444;
              border: 1px solid rgba(239, 68, 68, 0.3);
              font-weight: 500;
              padding: 10px 16px;
              border-radius: 8px;
              backdrop-filter: blur(10px);
              
              &:hover {
                background: rgba(239, 68, 68, 0.2);
                border-color: rgba(239, 68, 68, 0.5);
              }
            }
          }
        }
        
        .card-content {
          flex: 1;
          padding: 0;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          
          .materials-table-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            
            .modern-table {
              flex: 1;
              
              :deep(.el-table__header-wrapper) {
                background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
                
                th {
                  background: transparent !important;
                  font-weight: 600 !important;
                  color: #374151 !important;
                  border-bottom: 2px solid #e5e7eb !important;
                  padding: 16px 12px !important;
                }
              }
              
              :deep(.el-table__body-wrapper) {
                .el-table__row {
                  transition: all 0.2s ease !important;
                  
                  &.even-row {
                    background-color: #fafbfc !important;
                  }
                  
                  &:hover {
                    background-color: #f0f9ff !important;
                    transform: scale(1.01) !important;
                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
                  }
                  
                  td {
                    padding: 16px 12px !important;
                    border-bottom: 1px solid #f1f5f9 !important;
                  }
                }
              }
              
              .material-info-cell {
                display: flex;
                align-items: center;
                gap: 12px;
                
                .material-icon-wrapper {
                  width: 36px;
                  height: 36px;
                  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
                  border-radius: 8px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  
                  .material-icon {
                    font-size: 16px;
                    color: white;
                  }
                }
                
                .material-details {
                  .material-name {
                    font-weight: 600;
                    color: #1f2937;
                    font-size: 14px;
                    line-height: 1.4;
                  }
                  
                  .material-model {
                    font-size: 12px;
                    color: #6b7280;
                    margin-top: 2px;
                  }
                }
              }
              
              .code-tag {
                background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
                color: #1e40af;
                border: 1px solid #93c5fd;
                font-weight: 600;
                font-family: 'Courier New', monospace;
              }
              
              .price-cell {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                font-weight: 600;
                
                .currency {
                  font-size: 12px;
                  margin-right: 2px;
                  opacity: 0.8;
                }
                
                .amount {
                  font-size: 14px;
                }
                
                &.purchase-price {
                  color: #059669;
                }
                
                &.calculated-price {
                  color: #dc2626;
                  
                  .amount {
                    font-size: 15px;
                    font-weight: 700;
                  }
                }
              }
              
              .remove-action-btn {
                color: #ef4444;
                font-weight: 500;
                
                &:hover {
                  color: #dc2626;
                  background-color: rgba(239, 68, 68, 0.1);
                }
              }
            }
            
            .table-summary {
              background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
              border-top: 1px solid #e5e7eb;
              padding: 16px 24px;
              
              .summary-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .summary-stats {
                  display: flex;
                  align-items: center;
                  gap: 16px;
                  
                  .stats-label {
                    font-weight: 600;
                    color: #374151;
                  }
                  
                  .stats-item {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    font-weight: 500;
                    color: #6b7280;
                    
                    .el-icon {
                      font-size: 14px;
                    }
                    
                    &.total-amount {
                      color: #dc2626;
                      font-weight: 700;
                    }
                  }
                  
                  .stats-divider {
                    color: #d1d5db;
                    font-weight: 300;
                  }
                }
                
                .summary-actions {
                  display: flex;
                  gap: 8px;
                  
                  .el-button {
                    font-size: 12px;
                    padding: 6px 12px;
                  }
                }
              }
            }
          }
          
          .empty-state-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 40px;
            
            .empty-illustration {
              position: relative;
              margin-bottom: 32px;
              
              .empty-icon-wrapper {
                position: relative;
                width: 120px;
                height: 120px;
                background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                
                .empty-icon {
                  font-size: 48px;
                  color: #9ca3af;
                }
                
                .icon-decoration {
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  
                  .decoration-dot {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    background: #3b82f6;
                    border-radius: 50%;
                    animation: float 3s ease-in-out infinite;
                    
                    &.dot-1 {
                      top: 20%;
                      right: 20%;
                      animation-delay: 0s;
                    }
                    
                    &.dot-2 {
                      bottom: 30%;
                      left: 15%;
                      animation-delay: 1s;
                    }
                    
                    &.dot-3 {
                      top: 60%;
                      right: 10%;
                      animation-delay: 2s;
                    }
                  }
                }
              }
            }
            
            .empty-content {
              text-align: center;
              
              .empty-title {
                margin: 0 0 12px 0;
                font-size: 20px;
                font-weight: 600;
                color: #374151;
              }
              
              .empty-description {
                margin: 0 0 32px 0;
                font-size: 14px;
                color: #6b7280;
                line-height: 1.6;
                max-width: 300px;
              }
              
              .empty-action-btn {
                background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
                border: none;
                padding: 14px 28px;
                font-size: 16px;
                font-weight: 600;
                border-radius: 12px;
                transition: all 0.3s ease;
                
                &:hover {
                  transform: translateY(-2px);
                  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
                }
              }
            }
          }
        }
      }
      
      // 参数卡片样式
      .params-card {
        .card-header {
          background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
          color: white;
          padding: 20px 24px;
          
          .header-main {
            .header-title {
              display: flex;
              align-items: center;
              gap: 16px;
              
              .title-icon-wrapper.params-icon {
                width: 48px;
                height: 48px;
                background: rgba(255, 255, 255, 0.15);
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                backdrop-filter: blur(10px);
                
                .title-icon {
                  font-size: 24px;
                  color: white;
                }
              }
              
              .title-content {
                .title-text {
                  margin: 0;
                  font-size: 20px;
                  font-weight: 600;
                  color: white;
                  line-height: 1.2;
                }
                
                .title-desc {
                  margin: 4px 0 0 0;
                  font-size: 14px;
                  color: rgba(255, 255, 255, 0.8);
                  line-height: 1.4;
                }
              }
            }
          }
        }
        
        .card-content {
          flex: 1;
          padding: 24px;
          
          .params-form-container {
            .form-section {
              margin-bottom: 32px;
              
              .section-label {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 12px;
                
                .required-indicator {
                  color: #ef4444;
                  font-weight: 700;
                  font-size: 16px;
                }
                
                .label-icon {
                  color: #f59e0b;
                  font-size: 16px;
                }
                
                .label-text {
                  font-weight: 600;
                  color: #374151;
                  font-size: 15px;
                }
              }
              
              .form-control-wrapper {
                .project-selector-input {
                  :deep(.el-input__wrapper) {
                    border-radius: 12px !important;
                    border: 2px solid #e5e7eb !important;
                    transition: all 0.3s ease;
                    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
                    
                    &:hover {
                      border-color: #f59e0b !important;
                      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1) !important;
                    }
                    
                    &.is-focus {
                      border-color: #f59e0b !important;
                      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15) !important;
                    }
                    
                    .el-input__inner {
                      font-weight: 500;
                      color: #374151 !important;
                      cursor: pointer;
                      
                      &::placeholder {
                        color: #9ca3af !important;
                        font-style: italic;
                      }
                    }
                  }
                  
                  :deep(.el-input__suffix) {
                    .input-suffix-icon {
                      color: #f59e0b;
                      font-size: 16px;
                    }
                  }
                }
                
                .project-confirmation-card {
                  margin-top: 16px;
                  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
                  border: 1px solid #bbf7d0;
                  border-radius: 12px;
                  padding: 16px;
                  
                  .confirmation-content {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    
                    .success-icon {
                      color: #16a34a;
                      font-size: 20px;
                    }
                    
                    .project-details {
                      .project-name {
                        font-weight: 600;
                        color: #166534;
                        font-size: 14px;
                        margin-bottom: 4px;
                      }
                      
                      .project-code {
                        font-size: 12px;
                        color: #16a34a;
                        font-family: 'Courier New', monospace;
                      }
                    }
                  }
                }
                
                .project-hint-card {
                  margin-top: 16px;
                  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
                  border: 1px solid #fbbf24;
                  border-radius: 12px;
                  padding: 16px;
                  
                  .hint-content {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    
                    .hint-icon {
                      color: #d97706;
                      font-size: 16px;
                    }
                    
                    .hint-text {
                      color: #92400e;
                      font-size: 13px;
                      font-style: italic;
                    }
                  }
                }
              }
            }
            
            .operation-guide-section {
              background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
              border-radius: 16px;
              padding: 20px;
              border: 1px solid #e2e8f0;
              
              .guide-header {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 16px;
                
                .guide-icon {
                  color: #64748b;
                  font-size: 16px;
                }
                
                .guide-title {
                  font-weight: 600;
                  color: #334155;
                  font-size: 14px;
                }
              }
              
              .guide-steps {
                .guide-step {
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  margin-bottom: 12px;
                  
                  &:last-child {
                    margin-bottom: 0;
                  }
                  
                  .step-indicator {
                    width: 24px;
                    height: 24px;
                    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
                    color: white;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: 700;
                    flex-shrink: 0;
                  }
                  
                  .step-text {
                    color: #475569;
                    font-size: 13px;
                    line-height: 1.4;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  
  // 动画效果
  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-3px);
    }
    60% {
      transform: translateY(-1px);
    }
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0) scale(1);
      opacity: 0.7;
    }
    50% {
      transform: translateY(-10px) scale(1.1);
      opacity: 1;
    }
  }
}

#app .el-table .el-table__header-wrapper th {
  background-color: #DCDCDC;
  border-bottom: 1px solid #8B8B7A;
  border-right: 1px solid #8B8B7A;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
}

.selector-input {
  width: 220px;
}

/* 批量模式样式 */
.batch-mode-notice {
  margin-bottom: 24px;
  
  :deep(.el-alert) {
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
    
    .el-alert__icon {
      color: #3b82f6;
    }
    
    .el-alert__title {
      color: #1e40af;
      font-weight: 600;
    }
    
    .el-alert__description {
      color: #1d4ed8;
    }
  }
}

.batch-material-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  
  .header-actions {
    display: flex;
    gap: 12px;
    
    .el-button {
      border-radius: 10px;
      font-weight: 500;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      &.el-button--primary {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        border: none;
        
        &:hover {
          background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
        }
      }
      
      &.el-button--danger {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        border: none;
        
        &:hover {
          background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        }
      }
    }
  }
  
  .header-stats {
    display: flex;
    gap: 12px;
    
    .el-tag {
      border-radius: 8px;
      font-weight: 500;
      border: none;
      padding: 0 12px;
      height: 28px;
      line-height: 26px;
      
      &.el-tag--primary {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        color: #1d4ed8;
        box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
      }
      
      &.el-tag--warning {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #d97706;
        box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
      }
    }
  }
}

.batch-materials-table {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background: white;
  
  :deep(.el-table) {
    border: none;
    
    .el-table__header {
      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
      
      th {
        background: transparent !important;
        border-bottom: 2px solid #e2e8f0 !important;
        border-right: 1px solid #f1f5f9 !important;
        color: #475569;
        font-weight: 600;
        font-size: 13px;
        padding: 16px 12px;
      }
    }
    
    .el-table__body {
      tr {
        transition: all 0.2s ease;
        
        &:hover {
          background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
        }
        
        td {
          border-bottom: 1px solid #f1f5f9 !important;
          border-right: 1px solid #f8fafc !important;
          padding: 12px;
        }
      }
    }
    
    .el-input-number {
      :deep(.el-input__wrapper) {
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        transition: all 0.2s ease;
        
        &:hover {
          border-color: #3b82f6;
        }
        
        &.is-focus {
          border-color: #3b82f6;
          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
        }
      }
    }
    
    .el-button--link {
      color: #ef4444;
      font-weight: 500;
      
      &:hover {
        color: #dc2626;
        background: rgba(239, 68, 68, 0.1);
        border-radius: 6px;
      }
    }
  }
}

.empty-materials-hint {
  text-align: center;
  padding: 48px 24px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transition: all 0.3s ease;
  
  &:hover {
    border-color: #94a3b8;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  }
  
  :deep(.el-empty) {
    .el-empty__image {
      img, svg {
        opacity: 0.6;
      }
    }
    
    .el-empty__description {
      color: #64748b;
      font-size: 14px;
      margin-top: 16px;
    }
  }
}

// 全局表单美化
:deep(.el-form) {
  .el-form-item {
    margin-bottom: 24px;
    
    .el-form-item__label {
      font-weight: 600;
      color: #374151;
      font-size: 14px;
      line-height: 1.6;
    }
    
    .el-form-item__content {
      .el-input {
        .el-input__wrapper {
          border-radius: 10px;
          border: 1px solid #e2e8f0;
          transition: all 0.3s ease;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
          
          &:hover {
            border-color: #3b82f6;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
          }
          
          &.is-focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
          }
          
          .el-input__inner {
            font-size: 14px;
            
            &::placeholder {
              color: #9ca3af;
              font-style: italic;
            }
          }
        }
      }
      
      .el-input-number {
        width: 100%;
        
        .el-input__wrapper {
          border-radius: 10px;
          border: 1px solid #e2e8f0;
          transition: all 0.3s ease;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
          
          &:hover {
            border-color: #3b82f6;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
          }
          
          &.is-focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
          }
        }
      }
      
      .el-select {
        width: 100%;
        
        .el-select__wrapper {
          border-radius: 10px;
          border: 1px solid #e2e8f0;
          transition: all 0.3s ease;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
          
          &:hover {
            border-color: #3b82f6;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
          }
          
          &.is-focused {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
          }
          
          .el-select__placeholder {
            color: #9ca3af;
            font-style: italic;
          }
        }
      }
      
      .el-radio-group {
        .el-radio {
          margin-right: 20px;
          
          .el-radio__label {
            font-weight: 500;
            color: #374151;
          }
          
          .el-radio__input {
            .el-radio__inner {
              border: 2px solid #e2e8f0;
              transition: all 0.2s ease;
              
              &:hover {
                border-color: #3b82f6;
              }
            }
            
            &.is-checked {
              .el-radio__inner {
                border-color: #3b82f6;
                background: #3b82f6;
              }
            }
          }
        }
      }
    }
  }
}

// 价格提示样式美化
.price-tip {
  margin-top: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 8px;
  border: 1px solid #fbbf24;
  
  .el-text {
    font-style: italic;
    font-size: 12px;
  }
}

// 弹出框美化
:deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  .el-dialog__header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    
    .el-dialog__title {
      font-weight: 600;
      color: #1f2937;
      font-size: 18px;
    }
  }
  
  .el-dialog__body {
    padding: 24px;
    background: white;
  }
  
  .el-dialog__footer {
    padding: 16px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #e2e8f0;
    
    .el-button {
      border-radius: 10px;
      font-weight: 500;
      padding: 10px 20px;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      
      &.el-button--primary {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        border: none;
        
        &:hover {
          background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
        }
      }
    }
  }
}

// 物料选择器美化
:deep(.material-selector-dialog) {
  .el-dialog {
    max-width: 1200px;
    
    .el-dialog__body {
      padding: 0;
      
      .material-selector-content {
        padding: 24px;
      }
    }
  }
}

// 物料核价弹出框专门样式
.material-pricing-dialog {
  :deep(.el-dialog) {
    .el-dialog__body {
      padding: 20px;
      max-height: 80vh;
      overflow-y: auto;
    }
  }
  
  .dialog-form {
    .el-form-item {
      margin-bottom: 18px;
      
      .el-form-item__label {
        font-size: 13px;
        font-weight: 500;
        color: #4b5563;
      }
    }
  }
  
  // 批量模式提示样式
  .dialog-batch-notice {
    margin-bottom: 20px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    padding: 16px;
    
    .notice-content {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      
      .notice-icon {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
        margin-top: 2px;
      }
      
      .notice-text {
        flex: 1;
        
        h4 {
          margin: 0 0 4px 0;
          font-size: 14px;
          font-weight: 600;
          color: #1e40af;
        }
        
        p {
          margin: 0;
          font-size: 12px;
          color: #1d4ed8;
          line-height: 1.5;
        }
      }
    }
  }
  
  // 批量头部样式
  .dialog-batch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    
    .header-actions {
      display: flex;
      gap: 8px;
    }
    
    .header-stats {
      display: flex;
      gap: 8px;
    }
  }
  
  // 批量表格样式（覆盖全局样式）
  .batch-materials-table {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    
    :deep(.el-table) {
      font-size: 13px;
      
      .el-table__header {
        th {
          background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
          font-size: 12px;
          font-weight: 600;
          color: #4b5563;
          padding: 12px 8px;
        }
      }
      
      .el-table__body {
        tr {
          td {
            padding: 10px 8px;
            font-size: 12px;
          }
        }
      }
      
      .el-input-number {
        :deep(.el-input__wrapper) {
          height: 28px;
          
          .el-input__inner {
            font-size: 12px;
          }
        }
      }
      
      .el-button {
        font-size: 11px;
        padding: 2px 8px;
      }
    }
  }
  
  // 空状态样式
  .dialog-empty-state {
    text-align: center;
    padding: 32px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    
    .empty-icon {
      font-size: 32px;
      color: #9ca3af;
      margin-bottom: 12px;
    }
    
    .empty-text {
      margin: 0;
      font-size: 13px;
      color: #6b7280;
    }
  }
  
  // 物料信息描述表格优化
  .selected-material-info {
    :deep(.el-descriptions) {
      .el-descriptions__table {
        .el-descriptions__cell {
          padding: 8px 12px;
          font-size: 13px;
          
          &.el-descriptions__label {
            font-weight: 500;
            width: 100px;
          }
        }
      }
    }
    
    .material-actions {
      margin-top: 12px;
      
      .el-button {
        font-size: 12px;
        padding: 6px 12px;
      }
    }
  }
  
  // 未选择物料样式
  .no-material-selected {
    padding: 24px;
    
    .el-button {
      font-size: 13px;
      padding: 8px 16px;
    }
    
    .no-data {
      font-size: 13px;
    }
  }
}

// 批量复制弹窗样式
.batch-copy-content {
  padding: 20px 0;
  
  .copy-info {
    margin-bottom: 20px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #409EFF;
    
    p {
      margin: 8px 0;
      color: #606266;
      font-size: 14px;
      
      strong {
        color: #409EFF;
        font-weight: 600;
      }
    }
  }
}

// 弹窗底部按钮样式
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 